<template>
  <div class="table-components">
    <div class="search">
      <div class="search-wrapper">
        <div class="search-inputs" v-if="expand && list">
          <SearchForm
            ref="pageForm"
            :form-data="formData"
            @update:formData="handleFormDataUpdate"
            :list="list"
            :rules="rules"
          />
        </div>
      </div>

      <div class="search-toolbar">
        <div
          v-if="Array.isArray(buttonGroup) && buttonGroup.length > 0"
          class="button-group"
        >
          <el-button
            v-for="(action, index) in buttonGroup"
            :key="index"
            :type="action.type"
            @click="action.click"
          >
            {{ action.label }}
          </el-button>
        </div>

        <div class="search-actions">
          <!-- 搜索按钮 -->
          <el-button type="primary" @click="request">
            <i class="el-icon-search"></i>
            搜索
          </el-button>

          <!-- 重置按钮 -->
          <el-button @click="refresh">
            <i class="el-icon-refresh"></i>
            重置
          </el-button>
        </div>
      </div>
    </div>

    <el-table
      class="table"
      ref="myTable"
      :data="dataSource"
      row-key="id"
      stripe
      border
      v-bind="tableProps"
      :height="height ? height : '100%'"
      scrollbar-always-on
      header-cell-class-name="heardClassName"
      :tooltip-options="{ popperClass: 'my-custom-tooltip' }"
      :cell-class-name="tableCellClassName"
      @selection-change="handleSelectionChange"
      :default-expand-all="false"
    >
      <RenderColumn v-for="item in columns" :key="item.prop" :item="item" />
    </el-table>

    <div class="table-pagination">
      <Pagination
        v-if="count > 0"
        :page-no="pageNo"
        :page-size="pageSize"
        :count="count"
        :request="request"
        @update:pageNo="handlePageNoUpdate"
        @update:pageSize="handlePageSizeUpdate"
      />
    </div>
  </div>
</template>

<script>
import RenderColumn from "./renderColumn.vue";
import Pagination from "./pagination.vue";
import SearchForm from "../SearchForm";

export default {
  name: "TableComponent",
  components: {
    RenderColumn,
    Pagination,
    SearchForm,
  },
  props: {
    request: {
      type: Function,
      default: null,
    },
    list: {
      type: Array,
      default: () => [],
    },
    rules: {
      type: Object,
      default: () => ({}),
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
    buttonGroup: {
      type: Array,
      default: () => [],
    },
    tableProps: {
      type: Object,
      default: () => ({}),
    },
    columns: {
      type: Array,
      required: true,
      default: () => [],
    },
    dataSource: {
      type: Array,
      required: true,
      default: () => [],
    },
    height: {
      type: Number,
      default: null,
    },
    tableCellClassName: {
      type: [String, Function],
      default: null,
    },
    count: {
      type: Number,
      default: 0,
    },
    pageNo: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      expand: true,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit("selection-change", val);
    },
    // 提供给父组件访问表格实例的方法
    getTableRef() {
      return this.$refs.myTable;
    },
    // 处理页码更新
    handlePageNoUpdate(val) {
      this.$emit("update:pageNo", val);
    },
    // 处理每页大小更新
    handlePageSizeUpdate(val) {
      this.$emit("update:pageSize", val);
    },
    // 处理表单数据更新
    handleFormDataUpdate(val) {
      this.$emit("update:formData", val);
    },
    refresh() {
      this.$emit("update:pageNo", 1);
      this.$emit("update:pageSize", 10);
      this.$emit("update:formData", {});
      this.$nextTick(() => {
        this.request && this.request();
      });
    },
  },
  mounted() {
    this.request && this.request();
  },
};
</script>

<style>
.my-custom-tooltip {
  max-width: 600px !important;
  /* 如果是 scoped 样式，可能需要使用 /deep/ 或者 >>> 来穿透作用域 */
}
.table-components .el-table__header-wrapper {
  background-color: #f5f7fa; /* 浅蓝色背景 */
}
.heardClassName {
  background-color: #f5f7fa !important; /* 浅蓝色背景 */
}
</style>

<style scoped lang="scss">
.table-components {
  display: flex;
  flex-direction: column;
  width: 100%;
  // height: 100%;
  height: calc(100vh - 84px - 40px);
}

.search {
  flex-shrink: 0;
  padding-bottom: 20px;

  .search-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;

    .search-inputs {
      flex: 1;
    }

    .search-actions {
      display: flex;
      gap: 10px;
      padding-top: 10px;
    }
  }

  .search-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.table-pagination {
  flex-shrink: 0;
  // padding: 20px 0px;
  padding-top: 20px;
}
</style>
